<!-- 认证 -->
<script setup lang="ts">
import { Page } from '@vben/common-ui';
import { reactive, ref, watchEffect } from 'vue';
import Pagination from "#/components/pagination.vue"
import { ElMessageBox, ElMessage } from "element-plus"
import { getCertifiedListApi, deleteCertificateInfoApi } from "#/api/certificate/list"
import { getCourseInfoApi } from "#/api/manage/course"

import { getCreateTime, getCertificateType } from './modules/const'
import { formatNumberWithCommas } from '#/utils/formatNumber'
import { Query, EditListDialog, SetCertificateHomeDialog } from './modules/list'
import { Pencil, PencilRuler, Trash2, FileText } from '@vben/icons';
import { $t } from "#/locales";
import CustomPopover from '#/components/custom-popover.vue';

const editListDialogRef = ref<InstanceType<typeof EditListDialog> | null>(null)
const setCertificateHomeDialogRef = ref<InstanceType<typeof SetCertificateHomeDialog> | null>(null)
const defaultQueryData = {
  // name: string;
  // type: number,
  // createTime: any
}

const queryData = reactive({ ...defaultQueryData });

const tableLoading = ref(false)
const tableData = ref<any>([])
const courseInfoList = ref<any>([])
const pageData = reactive({
  total: 0,
  curPage: 1,
  pageSize: 10
})

const getCourseInfo = () => {
  const params = {
    curPage: 1
  } as any
  tableLoading.value = true
  getCourseInfoApi(params).then(res => {
    let { data } = res;
    courseInfoList.value = data.map(item => { return { name: item.name ?? '', id: String(item.id) ?? '' } })
  }).finally(() => {
    tableLoading.value = false
  })
}

const getTabelData = () => {
  const params = {
    curPage: pageData.curPage,
    pageSize: pageData.pageSize
  } as any
  Object.keys(queryData).forEach(key => {
    const kVal = queryData[key as keyof typeof queryData]
    if (kVal) {
      if (key === 'createTime' && Array.isArray(kVal)) {
        params['startTime'] = kVal[0]
        params['endTime'] = kVal[1]
      } else {
        params[key] = kVal
      }
    }
  })
  tableLoading.value = true
  getCertifiedListApi(params).then(res => {
    let { data, pageInfo } = res;
    tableData.value = data
    pageData.total = pageInfo.totalRows
  }).finally(() => {
    tableLoading.value = false
  })
}

const edit = (data: any) => {
  editListDialogRef.value?.inint(data, $t('common.editTxt'))
}

const deleteInfo = (data: any) => {
  console.log(data)
  ElMessageBox.confirm(
    `${$t('common.confirmTxt', [$t('common.deleteTxt', [$t('whiteLink.certifiedInfoTxt')])])}`,
    $t('common.tipTxt'),
    {
      confirmButtonText: $t('common.submitTxt'),
      cancelButtonText: $t('common.cancelTxt'),
      type: 'warning',
    }
  )
    .then(() => {
      deleteCertificateInfoApi(data.id).then(() => {
        ElMessage.success($t('common.deleteTxt', [$t('common.successTxt')]))
        getTabelData()
      }).finally(() => {
      })
    })
    .catch(() => { })
}

const onAdd = () => {
  editListDialogRef.value?.inint(null, $t('common.newTxt'));
};

const showDetail = (data:any) => {
  editListDialogRef.value?.inint(data, $t('common.detailTxt'));
}

const setCertificateHome = (data:any) => {
  setCertificateHomeDialogRef.value?.inint(data)
}

watchEffect(() => {
  getTabelData()
  getCourseInfo()
})


</script>
<template>
  <Page class="question h-full">
    <div class="flex flex-col h-full bg-[#fff] p-[24px] rounded-sm">
      <!-- <Query v-model="queryData" class="mb-[5px]" @query-data="getTabelData" @reset-query="resetQuery" /> -->
      <div class="opt mb-[15px]">
        <el-button type="primary" @click="onAdd">{{ $t('common.newTxt') }}</el-button>
      </div>
      <el-table :data="tableData" class="flex-1 overflow-auto" v-loading="tableLoading">
        <el-table-column align="center" width="60px" type="index" :label="$t('common.numberIdxTxt')" />
        <el-table-column prop="name" :label="$t('whiteLink.certifiedNameTxt')" min-width="210" />
        <el-table-column prop="type" :label="$t('whiteLink.certifiedTypeTxt')" min-width="90">
          <template #default="{ row }">
            <div>{{ getCertificateType(row.type) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="targetPrice" :label="$t('whiteLink.targetPriceTxt')" min-width="120">
          <template #default="{ row }">
            <div>{{ formatNumberWithCommas(row.targetPrice, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="discountPrice" :label="$t('whiteLink.discountPriceTxt')" min-width="120">
          <template #default="{ row }">
            <div>{{ formatNumberWithCommas(row.discountPrice, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="description" :label="$t('whiteLink.certifiedDescTxt')" min-width="200">
          <template #default="{ row }">
            <CustomPopover :strTxt="row.description || '--'"></CustomPopover>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" :label="$t('common.createTimeTxt')" min-width="200">
          <template #default="{ row }">
            <div>{{ getCreateTime(row.createTime) }}</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('common.operationTxt')" width="140">
          <template #default="{ row }">
              <el-tooltip effect="dark" :content="$t('whiteLink.certificationHomeConfigTxt')" :show-after="1000" placement="top">
                <el-badge :offset="[0, 5]" class="mr-[12px]" :is-dot="row.editStatus === 1">
                  <el-button :icon="PencilRuler" link @click="setCertificateHome(row)"></el-button>
                </el-badge>
              </el-tooltip>
              <el-tooltip effect="dark" :content="$t('common.detailTxt')" :show-after="1000" placement="top">
                <el-button :icon="FileText" link @click="showDetail(row)"></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" :content="$t('common.editTxt')" :show-after="1000" placement="top">
                <el-button :icon="Pencil" link @click="edit(row)"></el-button>
              </el-tooltip>
              <el-tooltip effect="dark" :content="$t('common.deleteTxt')" :show-after="1000" placement="top">
                <el-button :icon="Trash2" :disable="row.status === 1" link @click="deleteInfo(row)"></el-button>
              </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <Pagination v-model="pageData" />
      <EditListDialog ref="editListDialogRef" :courseInfoList="courseInfoList" @query-table="getTabelData">
      </EditListDialog>
      <SetCertificateHomeDialog ref="setCertificateHomeDialogRef" @query-table="getTabelData"/>
    </div>
  </Page>
</template>
